#page-home>.todayinfo
  position absolute
  top 170px
  left 56px
  width 512px
  >.head
    color #ffb924
    overflow hidden
    margin-bottom 34px
    .title
      font-size 24px
      float left
    .more
      font-size 16px
      color inherit
      text-decoration none
      float left
      margin-top 10px
      margin-left 40px
      &:hover
        color #b4c4f7
    .num
      float right
      margin-right 22px
  >.tabs
    margin-bottom 25px
    display flex
    label
      margin-right 16px
      [type=radio]
        display none
      .cont
        height 86px
        width 86px
        box-sizing border-box
        text-align center
        cursor pointer
        position relative
        >img
          margin 2px auto 3px
        >.name
          color #03acca
          width 86px
        >.num
          width 29px
          height 29px
          border-radius 50%
          background #cb1b1b
          color white
          font-size 16px
          line-height 28px
          box-shadow 0 2px 7px 1px rgba(255,0,0,.35)
          position absolute
          top -4px
          right 6px
          display none
      [type=radio]:checked + .cont
        background url(../img/home-todayinfo.png)
        >img
          filter brightness(1.5) drop-shadow(0 0 6px rgba(255,255,255,.6))
        >.name
          color #7eebff
          text-shadow 0 0 6px white
  >.tabcont
    height 626px
    overflow hidden
    &::-webkit-scrollbar
      display none
    .listitem
      box-sizing border-box
      border-bottom 2px dotted #133399
      font-size 14px
      padding 13px 10px
      cursor pointer
      text-decoration none
      display block
      &:last-child
        border-bottom 0
      &:nth-child(1)
      &:nth-child(2)
      &:nth-child(3)
        >.head
          color #ff302b
      >.head
        color #b4c4f7
        display flex
        justify-content space-between
        align-items center
        margin-bottom 8px
        white-space nowrap
        >.title
          font-size 18px
          width 390px
          overflow hidden
          text-overflow ellipsis
      >.cont
        color #6f87d6
        line-height 24px
        margin-bottom 8px
        max-height (@line-height * 3)
        overflow hidden
        font-size 15px
      >.foot
        display flex
        justify-content space-between
        color #097e93

@keyframes homeChartSlide
  0%
  30%
    opacity 0
    visibility hidden
    transform translateX(500px)
  37%
  63%
    opacity 1
    visibility visible
    transform translateX(0)
  70%
  100%
    opacity 0
    visibility hidden
    transform translateX(-500px)

#page-home>.topicblock
  position absolute
  top 154px
  right 63px
  width 494px
  height 856px
  transition all .5s ease
  &.pre
  &.next
    visibility hidden
    opacity 0
  &.pre
    transform translateY(-870px)
  &.next
    transform translateY(870px)
  >.item
    margin-bottom 44px
    >.head
      color #ffb924
      display flex
      align-items baseline
      margin-bottom 25px
      .title
      .num
        font-size 24px
      .more
        font-size 16px
        color inherit
        text-decoration none
        margin-left 40px
      .num
        flex-grow 1
        text-align right
    >.charts
      height 200px
      overflow hidden
      position relative
      >.chart
        height 200px
        position absolute
        top 0
        left 0
        width @width
        animation homeChartSlide 18s infinite linear
        for i in (0..2)
          &:nth-child({i + 1})
            animation-delay -27s + 6s * i
      >.Country
        >svg
          transform scale(.8)
          transform-origin center 0
    >.cont
      >.nodata
        height 128px
        font-size 20px
        text-align center
        line-height @height
        color #6f87d6        
      >.listitem
        height 32px
        display flex
        justify-content space-between
        align-items center
        cursor pointer
        color #6f87d6
        font-size 17px
        >.title
          width 380px
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        &:hover
          color #b4c4f7

#page-home>.lchart
  position absolute
  top 158px
  left 600px
  width 440px
  transition all .5s ease
  >.title
    color #b7c9ff
    font-size 18px
    text-align center

#page-home>.rchart
  position absolute
  width 400px
  top 154px
  right 638px
  transition all .5s ease
  >.title
    color #ffb924
    font-size 24px
  >.todaystatus
    color #6f87d6
    display flex
    flex-wrap wrap
    margin -5px auto 14px
    >.item
      width 50%
      height 63px
      display flex
      align-items center
  >.topchart
    margin 12px 0 24px
  >.hotkws
    display flex
    flex-wrap wrap
    justify-content space-between
    margin-top 36px
    >.item
      width 81px
      height 39px
      line-height 36px
      text-align center
      box-sizing border-box
      color #6f87d6
      cursor pointer
      &.active
        background url(../img/home-hotkw-bg.png)
      &:nth-child(4) ~ .item
        margin-top 30px
.xj-tim
  display flex
  width 280px
#earth-timelabel
  position absolute
  bottom 14px
  left calc(50% - 140px)
  font-size 16px
  color #9ab0f7
  white-space nowrap
  text-align center
  >.time-chose
    display flex
    label
      cursor pointer
      margin-right 30px
      >input[type="radio"]
        display none
      .txt
        color #03acca
        font-size 12px
        width 71px
        height 35px
        box-sizing border-box
        text-align center
        line-height 35px
      >input:checked + .txt
        background url(../img/search-type.png) no-repeat center
        background-size contain
  >.show
    >.time
    >.date
      display inline-block
      margin-left 10px
    >.split
      margin-left 10px
      display inline-block
    >.sbtn
      font-size 12px
      margin-left 10px
      background url('../img/prevpage.png')
      display inline-block
      width 88px
      height 43px
      line-height @height
      text-align center
      color inherit
      text-decoration none
  >.update
    display none
    >.m-timedate
      width 185px
      height 35px
      background url('../img/timebg.png')
      border 0
      padding 0
      outline none
      color #03acca
      text-align center
      font-size 16px
      background-size contain
    >.split
      display inline-block
      height 1px
      border 1px solid #575fa6
      width 13px
      margin 0 23px
      vertical-align middle
    .ybtn
      background url('../img/sure.png')
      width 53px
      height 35px
      display inline-block
      vertical-align middle
      margin-left 20px
      line-height 35px
      text-decoration none
      text-align center
      color inherit
      background-size contain
/*时间轴*/      
.time-wrap
  position absolute
  bottom 36px
  left calc(50% - 770px)
  width 1540px
  display flex
  justify-content center
  z-index 1111
  .time-limit
    width 95%
    overflow hidden
    position relative
    height 50px
    .time-axis
      height 16px
      min-width 100%
      border-radius 4px
      transition  left 1s ease-in-out
      position absolute
      .axis-line
        height 7px
        min-width 100%
        background #263a71
        position absolute
        left 0
        top 4px
        .x
          width 1px
          height 6px
          background #ffffff
          margin-top 12px
          float left
          margin-left 250px
          position relative
          span 
            width 42px
            font-size 12px
            color #6f87d6
            display inline-block
            margin-left -20px
            text-align center
            margin-top 7px
          &:nth-child(1)
            margin-left 60px !important
          &.x1
            margin-left 400px

      .point-line
        min-width 100%
        position absolute
        top 4px
        height 12px
        border-radius 50%
        .point
          width 12px
          height 12px
          background rgba(66,114,152,0.7)
          border-radius 50%
          border 1px solid rgba(0,240,255,0.8)
          display inline-block
          position absolute
          top -4px
          cursor pointer
          transition 0.3s
          &:after
            width 6px
            height 6px
            content ''
            display block
            background #ffffff
            background-position center
            border-radius 50%
            left 3px
            top 3px
            position absolute
          &:hover
            transform scale(1.1)


  .time-prev,
  .time-next
    position absolute
    width 14px
    height 16px
    background-size contain
    top 0
  .time-prev
    background url(../img/ti-le.png)
    left 0
  .time-next
    background url(../img/ti-ri.png)
    right 0

.circle-time
  position absolute
  display none
  left 0px
  bottom 89px
  width 830px
  height 520px
  background url(../img/circle-time.png) no-repeat center
  background-size contain
  box-sizing border-box
  padding 40px 30px
  z-index 112
  transition all 1s
  opacity 0
  .circle-con
    width 100%
    height 100%
    overflow-y auto
    .img
      margin-bottom 20px
      >img
        margin-right 10px
        float left
        height 140px
        width 250px
        &:nth-child(3)
          margin-right 0
    .info
      color #dfe9ff
      font-size 16px
      line-height 28px
      white-space normal
      text-align left
      overflow-y auto
      margin-bottom 50px
#page-home>.todayinfo
#page-home>.lchart
#page-home>.topicblock
#page-home>.rchart
#home-report-btn
#earth-timelabel
  transition all 1s ease
  &.fadeOut
    visibility hidden
    opacity 0
.clearfix:after
  clear both
  content ''
  display block
  height 0
  width 0
#page-home>.todayinfo
#page-home>.lchart
  &.fadeOut
    transform translateX(-600px)

#page-home>.topicblock
#page-home>.rchart
  &.fadeOut
    transform translateX(600px)

#home-report-btn
  &.fadeOut
    transform translateY(-100px)

#earth-timelabel
  transition all .3s ease
  &.fadeOut
    transform translateY(100px)
#app.layout0
  #page-home>.lchart
    transform translateX(-100px)
    opacity 0
    visibility hidden    
  #page-home>.rchart
    transform translateX(100px)
    opacity 0
    visibility hidden

#home-report-btn
  position fixed
  top 42px
  left calc(50% - 24px)
  cursor pointer
  z-index 2111

#home-report-mask
  position fixed
  z-index 2100
  top 0
  left 0
  right 0
  bottom 0
  opacity 0
  transition all .5s ease
  background rgba(0, 0, 0, .6)
  visibility hidden
  &.active
    visibility visible
    backdrop-filter blur(6px)
    opacity 1
  >.left
  >.right
    position absolute
    top 523px
    cursor pointer
    transition all .3s ease
    &.hide
      visibility hidden
      opacity 0
  >.left
    left calc(50% - 1030px)
    #app.layout0 &
      left calc(50% - 950px)
  >.right
    right calc(50% - 1030px)
    transform rotate(180deg)
    #app.layout0 &
      right calc(50% - 950px)

#home-report-mask>.list
  position absolute
  display flex
  flex-wrap wrap
  top 251px
  width 1756px
  left 'calc(50% - %s)' % (@width / 2)
  overflow hidden
  height 630px
  transition all .6s ease
  &.flyleft
    transform translateX(-1300px)
    opacity 0
  &.flyright
    transform translateX(1300px)
    opacity 0
  #app.layout0 &
    width 1656px
    left 'calc(50% - %s)' % (@width / 2)
  >.item
    width 239px
    height 289px
    background url(../img/home-report-bg.png)
    margin-bottom 46px
    margin-right 64px
    padding 26px 11px
    box-sizing border-box
    transition all .3s ease
    opacity 1
    transform translate(0, 0)
    cursor pointer
    for num in (1..12)
      &:nth-child({num})
        transition-delay .05s * num
    ^[-1].enter>.item
      transition-duration 0s
      transition-delay 0s!important
      opacity 0
      transform translate(6px, 8px)
    &.fadeOut
      opacity 0
      transition all .5s ease 0s!important
    &.fadeCont
      transform rotateY(90deg)
      transition all .5s ease!important
      >*
        transition all .5s ease
        opacity 0
    &.rotate
    #app.layout0 &
      margin-right 44px
    &:nth-child(6n)
      margin-right 0!important
    >.title
      color #e3280f
      font-size 14px
      border-bottom 3px solid #e3280f
      line-height 25px
      height 65px
      box-sizing border-box
      margin-bottom 26px
      text-align center
      padding 0 25px
    >.cont
      padding-left 26px
      color #6f87d6
      line-height 34px
      font-size 20px
      width 382px
      transform-origin 0 0
      transform scale(.5)
      height @line-height * 9
      overflow hidden

detailAndShims()
  position absolute
  width 1334px
  height 797px
  top 161px
  left 'calc(50% - %s)' % (@width / 2)
  border 28px solid transparent
  box-sizing border-box
  visibility visible
  transition all .4s ease
  border-image url(../img/home-report-bg.png) 28 fill

shimstate0()
  transform scale(1.08, 0.85)
  opacity 0

shimstate1()
  transform scale(1.055, 0.903)
  opacity .3

shimstate2()
  transform scale(1.03, 0.955)
  opacity .5

shimstate3()
  transform scale(1, 1)
  opacity 1

shimstate4()
  transform scale(0.8) translateY(100px)
  filter blur(3px)
  opacity 0

#home-report-mask
  >.shim
    detailAndShims()
    z-index 40
    &.hide
      visibility hidden
      opacity 0!important
  >.dshim0
    shimstate2()
    &.hide
    &.up
      shimstate3()
  >.dshim1
    shimstate1()
    &.hide
    &.up
      shimstate2()
  >.dshim2
    shimstate0()
    &.hide
    &.up
      shimstate1()

#home-report-mask>.detail
  detailAndShims()
  z-index 50
  padding 0 84px
  color #dce5ff
  display none
  &.up
    shimstate4()
  &.fadeOut
    opacity 0
    transform scale(.6)
    transition all .5s ease
  >.cont
    transition all .4s ease
    &.hide
      opacity 0
    >.close
      position absolute
      top -9px
      right -5px
      cursor pointer
    >.content
      >.title
        font-size 30px
        color #ff0a0a
        margin 48px 0 24px
        text-align center
      >.desc
        font-size 16px
        margin-bottom 24px
        text-align center
      >.split
        border-bottom 2px solid #ff0000
        display flex
        justify-content space-between
        line-height 30px
        font-size 14px
      >.h1
        margin 30px 0 20px
        text-align center
        font-size 24px
      >.h2
        margin-bottom 28px
        font-size 24px
      >.n
        line-height 30px
        margin-bottom 28px
      >.end
        border-top 1px solid #4d697f
        padding-top 32px
        line-height 30px
        padding-left 899px
        white-space nowrap
        >.l
          overflow hidden
          text-overflow ellipsis